<template>
    <div class="home-container">
        <van-nav-bar title="购物车" class="nav-bar" />
        <h1>  总价：{{ total }}</h1>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            

        >
            <van-cell v-for="item in cartdata" style="display: flex;" >

            <div style="display: flex;">
                <div class="cell-content">
                    <div>
                    商品名称 {{ item.name }} 
                    </div>
                    价格 {{ item.price }}
                    数量{{ item.count }} 
                    总价{{ item.price * item.count }}
                </div>
                <div class="cell-right">
                    <van-radio-group v-model="item.check_status" @click="checkitems(item)">
                        <van-radio name="1">选中</van-radio>
                        <van-radio name="0">取消选中</van-radio>
                    </van-radio-group>
                </div>

            </div>

            </van-cell>
        </van-list>


        <button @click="order">结算</button>

        
    </div>


</template>




<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();


const loading = ref(false);
const finished = ref(false);

const cartdata = ref([])

const total = ref(null)



const onLoad = () => {
    axios.get('http://127.0.0.1:8000/goods/addcart/?user_id=1')
    .then(res => {
        console.log(res)
        cartdata.value = res.data.cart
        total.value = res.data.total
        loading.value = false;
        finished.value = true;
    })

};





const checkitems = (item) => {
    console.log(item)
    const data = {
        user_id:1,
        goods_id:item.id,
        check_status:item.check_status

    }
    axios.post('http://127.0.0.1:8000/goods/checkcart/',data).then(res => {
        onLoad()
    });

    
}



const order = () => {
    router.push('/order')
    


}



</script>



<style scoped>
.home-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  overflow: auto; /* 添加滚动条 */
  scrollbar-width: none; /* Firefox */
}

.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.left-align {
    text-align: left;
}
.cell-content {
    text-align: left;
    display: flex;
    width: 50%;
    flex-direction: column; /* 垂直方向排列子元素 */

}


.cell-right {
    display: flex;
    width: 50%;
    justify-content: center; /* 水平居中 */
    align-items: center;
}




</style>